<template>
  <view v-if="shenheStatus == 0" class="page">
    <u-sticky :h5-nav-height="0">
      <!-- @change="change" -->
      <pageHeader
        ref="pageHeader"
        :params="{
          cate,
          cat_id,
          sortList,
          sort,
          filterList,
          time_type,
          distance_id,
          distance,
          districtList,
        }"
      ></pageHeader>
    </u-sticky>

    <pageList :items="list"></pageList>

    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
import pageHeader from "./components/page-header.vue";
import pageList from "./components/page-list.vue";
import { workerList, workerIndex } from "@/api/marketing/callOut";

export default {
  components: {
    Shenhe,
    toolsMore,
    pageHeader,
    pageList,
  },

  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      name: "",
      cate: [],
      cat_id: "",

      sortList: [
        { name: "智能排序", id: "" },
        { name: "距离优先", id: 1 },
        { name: "好评优先", id: 2 },
        { name: "销量优先", id: 3 },
      ],
      sort: "",

      filterList: [
        { name: "0-5时", id: 0 },
        { name: "5-10时", id: 1 },
        { name: "10-14时", id: 2 },
        { name: "14-17时", id: 3 },
        { name: "17-21时", id: 4 },
        { name: "21-24时", id: 5 },
        { name: "24小时营业", id: 6 },
      ],
      time_type: "",

      distance: "0",
      distance_id: "",
      districtList: [],

      longitude: "",
      latitude: "",
    };
  },

  async onLoad() {
    this.getLocation();
  },

  onShow() {
    this.Emit.$on("handle", this.handle);
  },

  onHide() {
    this.Emit.$off("handle");
  },

  onUnload() {
    this.Emit.$off("handle");
  },

  methods: {
    async getLocation() {
      try {
        let res = await this.$store.dispatch("getLocation");
        this.longitude = res.longitude;
        this.latitude = res.latitude;

        this.workerIndex();
        this.clearData();
      } catch (error) {
        this.workerIndex();
        this.clearData();
      }
    },

    async workerIndex() {
      try {
        let { longitude, latitude } = this;
        const res = await workerIndex({ longitude, latitude });

        if (!res.code) {
          let { cate, district } = res.data;
          this.cate = cate || [];
          this.districtList = district || [];
        }
      } catch (err) {
        this.$utils.toast(err);
      }
    },

    handle(type, params) {
      switch (type) {
        case "goItem":
          if (!params.open_status)
            return this.$utils.toast("当前已下线,请选择其他！");
          this.$utils.toUrl(
            `/marketing/serviceHome/engineer/item/index?id=${params.id}`
          );
          break;

        case "openDistance":
          this.$refs.pageHeader.distanceIndex = "";
          this.distance_id = "";
          this.distance = "0";
          this.clearData();
          break;

        default:
          if (type === "distance_id") {
            this.$refs.pageHeader.distanceIndex = 1;
            this.distance = "";
          }

          if (this[type] === params) {
            this[type] = "";
          } else {
            this[type] = params;
          }

          this.$refs.pageHeader.showType = false;
          this.$refs.pageHeader.searchValue = "";
          this.clearData();
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      let {
        list: oldList,
        page,
        cat_id,
        sort,
        time_type,
        distance_id,
        distance,
        name,
        longitude,
        latitude,
      } = this;
      this.moreStatus = 2;

      const res = await workerList({
        page,
        cat_id,
        sort,
        time_type,
        distance_id,
        distance,
        name,
        longitude,
        latitude,
      });
      uni.stopPullDownRefresh();
      this.moreStatus = 1;

      if (res.code == 0) {
        let { data, totalCount } = res.data,
          count = parseInt(totalCount);
        if (data.length) {
          oldList.push(...data);
          this.page = page + 1;
        }
        if (oldList.length >= count) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.getLocation();
  },
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}
</style>
